window.onload = function () {
    var classOne = document.getElementsByClassName('classOne');

    // 获取input file 和 外围的div
    var imgList = document.getElementById("imgList");
    var imgFile = document.getElementById("inputPicUpload");

    imgFile.addEventListener('change', function () {
        if (!imgFile.value) {
            //alert(myTestFile); //after change
            //info.innerHTML = 'not choose file';
            return;
        } else {
            createImgBox(imgFile);
        }

        function createImgBox(imgFile) {
            //console.log(imgFile.files.length);
            for (var i = 0; i < imgFile.files.length; i++) {
                //console.log("im running too");
                const file = imgFile.files[i];
                const imgBox = document.createElement('div');
                imgBox.className = 'testimg';
                if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                    alert('不是有效的图片文件!');
                    return;
                } else {
                    // 读取文件:
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var data = e.target.result; // '...(base64编码)...'            
                        //preview.style.backgroundImage = 'url(' + data + ')';
                        imgBox.innerHTML = `<img src="${data}" />`;
                    };
                    // 以DataURL的形式读取文件:
                    reader.readAsDataURL(file);
                    imgList.insertBefore(imgBox,imgList.childNodes[0]);
                }
            }
        }
    })

    var limitLength = (function(maxlength){
        _self = this;
        var txtArea = document.getElementById('commodityDescription');
        var wordSurplus = document.getElementById('commodityDescriptionSurplus');
        maxlength = maxlength | 350;
        txtArea.onkeyup = function(){
            //console.log(this.value.length);
            wordSurplus.innerText = maxlength - this.value.length;
        }
    })();

}

// <p> 文件: ${file.name} <br/>
// 大小: ${file.size} kb<br/>
// 修改: ${file.lastModifiedDate} </p>